
<template>
<div class="backgroundBox">
  <el-tabs style="height: 200px;">
    <el-tab-pane label="自然"><background-image :background=zr></background-image></el-tab-pane>
    <el-tab-pane label="建筑"><background-image :background=jz></background-image></el-tab-pane>
    <el-tab-pane label="动物"><background-image :background=dw></background-image></el-tab-pane>
    <el-tab-pane label="旅行"><background-image :background=lx></background-image></el-tab-pane>
    <el-tab-pane label="美食"><background-image :background=ms></background-image></el-tab-pane>
    <el-tab-pane label="动漫"><background-image :background=dm></background-image></el-tab-pane>
    <el-tab-pane label="运动"><background-image :background=js></background-image></el-tab-pane>
    <el-tab-pane label="技术"><background-image :background=yd></background-image></el-tab-pane>
    <el-tab-pane label="街头"><background-image :background=jt></background-image></el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import BackgroundImage from "@/components/BackgroundImage.vue";
import {ApiConfig} from "@/config/AxiosApi";
export default {
  created() {
    // 参数值数组
    const categories = ['zr', 'jz', 'dw', 'lx', 'ms', 'dm', 'js', 'yd', 'jt'];
    // 创建五个 Axios 请求
    const requests = categories.map(category => {
      return this.$axios.get(ApiConfig["getbackground"], {
        params: { category: category, ishome: "T" }
      });
    });
    // 使用 Promise.all() 并行发送请求
    Promise.all(requests)
        .then(responses => {
          // 处理每个请求的响应
          responses.forEach((response, index) => {
            switch (index){
              case 0:
                this.zr = response.data;
                break;
              case 1:
                this.jz = response.data;
                break;
              case 2:
                this.dw = response.data;
                break;
              case 3:
                this.lx = response.data;
                break;
              case 4:
                this.ms = response.data;
                break;
              case 5:
                this.dm = response.data;
                break;
              case 6:
                this.js = response.data;
                break;
              case 7:
                this.yd = response.data;
                break;
              case 8:
                this.jt = response.data;
                break;
            }
          });
        })
        .catch(error => {
          console.error(error);
        });
  },
  data() {
    return {
      zr:[],
      jz:[],
      dw:[],
      lx:[],
      ms:[],
      dm:[],
      js:[],
      yd:[],
      jt:[]

    };
  },
  components:{
    BackgroundImage
  }
};
</script>

<style scoped>
.backgroundBox{
  width: 600px;
  height: 600px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  border-radius: 10px;
  background-color: rgba(255,255,255);
}
</style>